<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./js/vue.global.js"></script>
    <title>数据绑定</title>
</head>

<body>
    <div id="app">
        <h3>1.文本插值：双括号绑定数据</h3>
        <p>{{message}}</p>
        <p>{{'欢迎，'+ username}}</p>
        <h3>2.v-html数据绑定</h3>
        <div v-html="htmlContent"></div>
        <h3>3.表达式绑定数据</h3>
        <p>{{message.split('').reverse().join('')}}</p>
        <p>{{completed?'完成':'未完成'}}</p>
        <h3>4.v-model双向绑定</h3>
        <input v-model="message" placeholder="输入内容">
        <h3>5.v-bind绑定属性</h3>
        <img v-bind:src="imageSrc">
        <a v-bind:href="linkHref" :title="linkTitle">More Info</a>
    </div>
    <script>
        const App = {
            data() {
                return {
                    message: 'Hello Vue!',
                    username: 'everyone',
                    htmlContent: '<h4>您好!</h4><p>我是html内容</p>',
                    completed: false,
                    imageSrc: 'https://vuejs.org/images/logo.png',
                    imageAlt: 'Vue.js Logo',
                    linkHref: 'https://vuejs.org',
                    linkTitle: '跳转到vue官网'
                };
            }
        };
        Vue.createApp(App).mount('#app');
    </script>
</body>

</html>